<template>
    <div>
        <div class="container">
            <el-page-header @back="goBack" content="用户订单详情"></el-page-header>
            <el-form label-width="160px" class="e-m-t-45">
                <el-descriptions class="e-m-t-45" :column="2" title="基本信息" border :labelStyle="{ width: '120px' }">
                    <el-descriptions-item label="订单ID">
                        {{ form.number }}
                        <el-tag size="mini" v-if="form.firstorder">首</el-tag>
                        <el-tag size="mini" v-if="form.enterprise">企</el-tag>
                    </el-descriptions-item>
                    <el-descriptions-item label="订单状态">
                        <span class="color-success"
                            v-if="form.managestate == '已回收' || form.managestate == '已入库'">{{
                                form.managestate
                            }}</span>
                        <span class="color-danger"
                        v-else-if="form.managestate == '待接单' || form.managestate == '已接单' || form.managestate == '待上门' || form.managestate == '待上门' || form.managestate == '待付款'">{{
                                form.managestate
                            }}</span>
                        <span class="color-warning" v-else>{{ form.managestate }}</span>
                    </el-descriptions-item>
                    <el-descriptions-item label="下单人" v-if="form.user">{{ form.user.name }}</el-descriptions-item>
                    <el-descriptions-item label="客户组名称" v-if="form.enterprise">{{ form.enterprise.name
                    }}</el-descriptions-item>
                    <el-descriptions-item label="下单时间">{{ form.createddatetime }}</el-descriptions-item>
                    <el-descriptions-item label="回收重量">{{ form.weight }}</el-descriptions-item>
                    <el-descriptions-item label="回收金额">{{ form.amount }}</el-descriptions-item>
                    <el-descriptions-item label="期望上门时间">
                        <el-date-picker
                            v-if="form.managestate == '待派单' || form.managestate == '待接单' || form.managestate == '已接单' || form.managestate == '待上门'"
                            v-model="form.doortime" size="small" type="datetime" placeholder="选择日期时间" @change="edit">
                        </el-date-picker>
                        <span v-else>{{ form.doortime ? form.doortime : '尽快上门' }}</span>
                    </el-descriptions-item>
                    <el-descriptions-item label="小哥上门时间">{{ form.brotherdoortime ? form.brotherdoortime : '未上门'}}</el-descriptions-item>
                    <el-descriptions-item label="备注" v-if="form.remarks">{{ form.remarks }}</el-descriptions-item>
                </el-descriptions>

                <!-- 用户信息 -->
                <div class="e-m-t-60">
                    <!-- <el-divider><span class="e-font-20 bold">用户信息</span></el-divider> -->
                    <el-descriptions :column="2" title="上门地址" border :labelStyle="{ width: '120px' }">
                        <el-descriptions-item label="姓名">{{ form.address.name }}</el-descriptions-item>
                        <el-descriptions-item label="联系电话">{{ form.address.mobile }}</el-descriptions-item>
                        <el-descriptions-item label="所属区域">{{ form.address.citynames }}</el-descriptions-item>
                        <el-descriptions-item label="详细地址">
                            <span class="e-p-r-5">{{ form.address.address }}</span>
                            <el-link type="primary" icon="el-icon-view" @click="checkMap">查看</el-link>
                            <el-link type="primary" icon="el-icon-edit" @click="alertEdit"
                                v-if="form.managestate == '待派单' || form.managestate == '待接单' || form.managestate == '已接单' || form.managestate == '待上门'">修改</el-link>
                            <!-- <el-button type="primary" icon="el-icon-edit" size="mini" @click="dialogVisible = true"></el-button> -->
                        </el-descriptions-item>
                    </el-descriptions>

                    <template v-if="form.estimated.length > 0">
                        <h4>需求回收品</h4>

                        <el-table :data="form.estimated" style="width: 100%">
                            <el-table-column label="可回收物">
                                <template slot-scope="scope">
                                    <span>{{ scope.row.names }}</span>
                                </template>
                            </el-table-column>
                            <!-- <el-table-column label="数量" width="180">
                                <template slot-scope="scope">
                                    <span v-if="scope.row.min == 0 && scope.row.max == 0">其他</span>
                                    <span v-else>
                                        <span v-if="scope.row.isweighing">{{ scope.row.min }}-{{ scope.row.max
                                        }}KG</span>
                                        <span v-else>{{ scope.row.min }}-{{ scope.row.max }}件</span>
                                    </span>
                                </template>
                            </el-table-column> -->
                        </el-table>
                        <div v-if="form.pics.length > 0">
                            <h4>下单拍照</h4>
                            <!-- {{fileURL + form.pics[0]  }} -->
                            <div class="flex">
                                <el-image class="img" v-for="(item, index) in form.pics" :key="index"
                                    style="width: 150px; height: 150px" :src="fileURL + item" fit="cover"
                                    :preview-src-list="[fileURL + form.pics[index]]">
                                </el-image>
                            </div>
                        </div>
                    </template>

                    <div v-if="form.ordercomments">
                        <h4>用户点评</h4>
                        <template v-if="form.ordercomments">
                            <div class="ordercomments">
                                <div class="flex">
                                    <span>便捷性:</span>
                                    <div class="e-flex-1"><el-rate v-model="form.ordercomments.convenience" disabled
                                            show-score text-color="#ff9900"></el-rate></div>
                                </div>
                                <div class="flex">
                                    <span>操作性:</span>
                                    <div class="e-flex-1"><el-rate v-model="form.ordercomments.operability" disabled
                                            show-score text-color="#ff9900"></el-rate></div>
                                </div>
                                <div class="flex">
                                    <span>穿着整齐:</span>
                                    <div class="e-flex-1"><el-rate v-model="form.ordercomments.dresssharp" disabled
                                            show-score text-color="#ff9900"></el-rate></div>
                                </div>
                                <div class="flex">
                                    <span>服务态度:</span>
                                    <div class="e-flex-1"><el-rate v-model="form.ordercomments.serviceattitude" disabled
                                            show-score text-color="#ff9900"></el-rate></div>
                                </div>
                                <div class="flex">
                                    <span>业务能力:</span>
                                    <div class="e-flex-1"><el-rate v-model="form.ordercomments.businesscapability" disabled
                                            show-score text-color="#ff9900"></el-rate></div>
                                </div>
                                <h5>点评：</h5>
                                <div>{{ form.ordercomments.remarks }}</div>
                            </div>
                        </template>
                        <el-empty v-else description="暂无点评"></el-empty>
                    </div>
                </div>

                <!-- 回收信息 -->
                <div class="e-m-t-60" v-if="form.brother">
                    <!-- <el-divider><span class="e-font-20 bold">回收信息</span></el-divider> -->
                    <el-descriptions :column="2" title="小哥信息" border :labelStyle="{ width: '120px' }">
                        <el-descriptions-item label="小哥姓名">{{ form.brother.name }}</el-descriptions-item>
                        <el-descriptions-item label="联系电话">{{ form.brother.mobile }}</el-descriptions-item>
                    </el-descriptions>
                    <div v-if="form.signinpic">
                        <h4>小哥上门拍照</h4>
                        <div class="flex">
                            <el-image class="img" style="width: 150px; height: 150px" :src="fileURL + form.signinpic"
                                fit="cover" :preview-src-list="[fileURL + form.signinpic]">
                            </el-image>
                        </div>
                    </div>
                    <template v-if="form.details.length > 0">
                        <h4>确认回收品类</h4>
                        <el-table border :span-method="objectSpanMethod" :data="retrievetableData" show-summary
                            :summary-method="getSummaries" style="width: 100%">
                            <el-table-column prop="large" label="类型">
                            </el-table-column>
                            <el-table-column prop="typenames" label="可回收物">
                            </el-table-column>
                            <el-table-column prop="weight" width="180" label="数量">
                                <template slot-scope="scope">
                                    <span>{{ scope.row.weight }}{{ scope.row.isweighing ? 'KG' : '件' }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="price" width="180" label="回收单价">
                                <template slot-scope="scope">
                                    <span>{{ scope.row.price }}{{ scope.row.isweighing ? '元/KG' : '元/件' }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="amount" width="180" label="总回收价（元）">
                                <!-- <template slot-scope="scope">
                                    <span>{{ scope.row.amount.tofixed(2) }}}</span>
                                </template> -->
                            </el-table-column>
                            <el-table-column prop="typeremarks" width="180" label="备注">
                            </el-table-column>
                        </el-table>
                    </template>
                </div>

                <h4>订单进程</h4>
                <div>
                    <el-scrollbar class="process-item" :wrap-class="'process-item-wrap'">
                        <el-timeline :reverse="true">
                            <el-timeline-item v-for="(activity, index) in process" :key="index"
                                :timestamp="activity.createddatetime">
                                <div class="flex">
                                    <span class="e-p-r-50" style="font-weight:bold">{{ activity.state }}</span>
                                    <div class="tips">{{ activity.remarks }}</div>
                                </div>
                            </el-timeline-item>
                        </el-timeline>
                    </el-scrollbar>
                </div>

                <el-form-item label-width="auto">
                    <el-button @click="goBack">返回</el-button>
                    <!-- <el-button type="danger" v-if="form.managestate != '已回收' && form.managestate != '已入库' && form.managestate != '已完成'
                        && form.managestate != '已取消'
                    " @click="showcancel = true">取消订单</el-button> -->

                    <el-button type="primary" @click="distribution(form)" v-if="form.managestate == 0">派单
                    </el-button>
                </el-form-item>
            </el-form>
        </div>
        <!-- 派单给小哥 -->
        <el-dialog title="派单" :visible.sync="distributionShow" width="800px">
            <div>
                <el-form class="query" ref="form" :model="sendForm" label-width="80px" :inline="true">
                    <el-form-item label="小哥姓名">
                        <el-input v-model="sendForm.key"></el-input>
                    </el-form-item>
                    <el-form-item label="所属区域">
                        <el-cascader v-model="sendForm.citypath" separator="-" @change="SelectCity" filterable :props="{
                            lazy: true,
                            checkStrictly: true,
                            lazyLoad: loadCity,
                            label: 'name',
                            value: 'id'
                        }" style="width: 100%;margin-right: 20px">
                        </el-cascader>
                    </el-form-item>
                    <el-button style="height: 39px; margin-left: 15px;" type="primary"
                        @click="searchDistribution(distributionForm.orderId)">查询</el-button>
                </el-form>
                <!-- <el-alert :title="'该订单的所在地区：' + sendForm.citynames" type="warning" show-icon>
                </el-alert> -->
                <el-table :data="distributionList" stripe style="width: 100%">
                    <el-table-column prop="name" label="小哥姓名" width="180">
                    </el-table-column>
                    <el-table-column prop="distance" label="距离目的地">
                        <template slot-scope="scope">
                            <span v-if="scope.row.lat == 0 && scope.row.lng == 0">未获取到小哥位置</span>
                            <span v-else>{{ scope.row.distance.toFixed(0) / 1000 }}km</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="ordercount" label="已有订单数（条）" width="180">
                    </el-table-column>
                    <el-table-column label="操作" fixed="right" width="100">
                        <template slot-scope="scope">
                            <el-button type="text" size="small" @click="assignment(scope.row.id)">选择</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="distributionShow = false">取消</el-button>
            </span>
        </el-dialog>
        <!-- 取消理由 -->
        <el-dialog title="取消订单" :visible.sync="showcancel" width="30%">
            <el-input type="textarea" :rows="5" placeholder="请输入取消订单的理由" v-model="textarea" maxlength="200">
            </el-input>
            <span slot="footer" class="dialog-footer">
                <el-button @click="showcancel = false">取消</el-button>
                <el-button type="primary" @click="cancel">确定</el-button>
            </span>
        </el-dialog>
        <!-- 修改地址 -->
        <el-dialog title="修改地址" :visible.sync="dialogVisible" width="800px" z-index="99">
            <el-form ref="form" :model="addressForm" label-width="100px">
                <el-form-item label="联系人">
                    <el-input v-model="addressForm.name"></el-input>
                </el-form-item>
                <el-form-item label="联系电话">
                    <el-input v-model="addressForm.mobile"></el-input>
                </el-form-item>
                <el-form-item label="所属城市">
                    <el-cascader v-if="editCity" ref="cityArea" separator="-" @change="SelectAddressCity" filterable :props="{
                        lazy: true,
                        checkStrictly: true,
                        lazyLoad: loadCity,
                        label: 'name',
                        value: 'id'
                    }" style="width: 100%;margin-right: 20px" v-model="form.cityid"></el-cascader>
                    <el-input v-else id='tipinput' v-model="addressForm.citynames" disabled placeholder="请输入城市"
                        prefix-icon="el-icon-location-information">
                        <el-button slot="append" @click="editCity = true">修改</el-button>
                    </el-input>
                </el-form-item>
                <el-form-item label="期望上门时间">
                    <el-date-picker
                        v-model="form.doortime" type="datetime" placeholder="选择日期时间">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="地址">
                    <el-input id='tipinput' v-model="addressForm.address" placeholder="请输入地址(街道、楼牌等)"
                        prefix-icon="el-icon-location-information">
                        <el-button slot="append" icon="el-icon-search" id="geoCode" :loading="loading">搜索</el-button>
                    </el-input>
                    <div id="container" class="e-m-t-10" style="width:100%;height: 300px;"></div>
                    <div id="panel" style="display:none"></div>
                    <div>经纬度：{{ form.lat }}，{{ form.lng }}</div>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="edit">确定</el-button>
            </span>
        </el-dialog>
        <!-- 查看详细地址 -->
        <el-dialog title="查看详细地址" :visible.sync="dialogVisible1" width="1200px" z-index="99">
        <div id="container" class="e-m-t-10" style="width:100%;height: 600px;"></div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    head() {
        return {
            title: '用户订单详情' 
        }
    },
    props: {
        id: {
            type: Number,
            default: 0
        }
    },
    data() {
        return {
            retrievetableData: [],
            // id: 0,
            form: {
                address: {},
                user: {},
                pics: [],
                details: [],
                estimated: [],
                brother: {},
                ordercomments: {
                    convenience: 0,
                    operability: 0,
                    dresssharp: 0,
                    serviceattitude: 0,
                    businesscapability: 0
                }
            },
            process: [],
            statusArr: ['待派单','待接单','已接单','待上门','待付款','已取消','已回收','待入库','已入库'],
            loading: false,
            // 小哥派单
            sendForm: {
                cityid: null,
                key: ''
            },
            distributionShow: false,
            distributionForm: {
                orderId: 0,
                brotherId: 0
            },
            distributionList: [],
            // 取消
            showcancel: false,
            textarea: '',
            // 修改地址
            dialogVisible: false,
            addressForm: {
                address: "",
                cityid: "",
                citynames: "",
                lat: null,
                lng: null,
                mobile: "",
                name: "",
                sex: ""
            },
            editCity: false,
            // 查看用户地图
            dialogVisible1: false
        }
    },
    mounted() {
        // this.id = this.$route.query.id
        this.getDetails(this.id)
        this.getProcess()
    },
    methods: {
        goBack() {
            this.$emit('goBack')
        },
        // 获取订单进程
        getProcess(){
            this.$axios.get('/User/Order/Process?id='+this.id).then((res) => {
                this.process = res
            })
        },
        cancel() { //取消订单
            this.$confirm('此操作将取消该订单, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$axios.post('/User/Order/Cancel', {
                    id: this.id,
                    reason: this.textarea,
                }).then((res) => {
                    this.$message.success(res.msg);
                    this.showcancel = false;
                    this.textarea = "";
                    this.getDetails(this.id)
                })
            })
        },
        initMap() {
            let that = this

            this.$AMapLoader.load({
                key: this.AMapSetting.key,             // 申请好的Web端开发者Key，首次调用 load 时必填
                version: this.AMapSetting.version,      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                plugins: ['AMap.Autocomplete', 'AMap.PlaceSearch'],       // 需要使用的的插件列表，如比例尺'AMap.Scale'等
            }).then((AMap) => {
                var clickListener, map = new AMap.Map("container", {  //设置地图容器id
                    resizeEnable: true,
                    center: [this.addressForm.lng, this.addressForm.lat], //初始化地图中心点位置
                });

                //输入提示
                // 实例化Autocomplete
                var autoOptions = {
                    // input 为绑定输入提示功能的input的DOM ID
                    city: '清远',
                    input: 'tipinput'
                }
                var Autocomplete = new AMap.Autocomplete(autoOptions);

                // 搜索按钮绑定事件
                var button = document.getElementById('geoCode');
                var marker = [];
                button.addEventListener("click", () => {
                    var keywords = this.addressForm.address;

                    var autoOptions = {
                        city: '0763'
                    }
                    var placeSearch = new AMap.PlaceSearch(autoOptions);
                    placeSearch.search(keywords, function (status, result) {
                        // 搜索成功时，result即是对应的匹配数据
                        console.log('status:', status)
                        console.log('result:', result)
                        if (status == "error") {
                            if (result == "USER_DAILY_QUERY_OVER_LIMIT") {
                                that.$message.error('已超出了该高德地图api调用次数限制');
                            }
                            return
                        }
                        if (status == "no_data") {
                            that.$message.error('搜索不到此地区');
                            return
                        }

                        var pois = result.poiList.pois;
                        // 移除已创建的 marker
                        map.remove(marker);
                        marker = [];

                        for (var i = 0; i < pois.length; i++) {
                            var poi = pois[i];
                            marker[i] = new AMap.Marker({
                                position: poi.location,   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
                                title: poi.name
                            });
                            marker[i].content = pois[i].address
                            marker[i].location = pois[i].location
                        }
                        //将创建的点标记添加到已有的地图实例：
                        map.add(marker);
                        map.setFitView();

                        var infoWindow = new AMap.InfoWindow({ offset: new AMap.Pixel(0, -30) });
                        marker.forEach((item) => {
                            item.on('click', function (e) {
                                let obj = e.target

                                infoWindow.setContent(obj.content);
                                infoWindow.open(map, obj.location);

                                that.addressForm.lat = obj.location.lat
                                that.addressForm.lng = obj.location.lng
                                that.addressForm.address = obj.content
                            });
                        })
                    })
                })

            }).catch(e => {
                console.log(e);
            })
        },
        // 修改地址与上门时间
        alertEdit() {
            this.dialogVisible = true
            this.addressForm = JSON.parse(JSON.stringify(this.form.address))
            this.initMap()
        },
        // 查看用户地址地图
        checkMap() {
            this.dialogVisible1 = true
            this.addressForm = JSON.parse(JSON.stringify(this.form.address))
            
            let that = this
            let marker = []
            this.$AMapLoader.load({
                key: this.AMapSetting.key,             // 申请好的Web端开发者Key，首次调用 load 时必填
                version: this.AMapSetting.version,      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                plugins: ['AMap.PlaceSearch'],       // 需要使用的的插件列表，如比例尺'AMap.Scale'等
            }).then((AMap) => {
                var map = new AMap.Map("container", {  //设置地图容器id
                    resizeEnable: true,
                    center: [this.addressForm.lng, this.addressForm.lat], //初始化地图中心点位置
                });
                var keywords = this.addressForm.address;

                // 移除已创建的 marker
                map.remove(marker);
                marker = new AMap.Marker({
                    position: new AMap.LngLat(that.addressForm.lng,that.addressForm.lat),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
                    title: keywords
                });

                // 将创建的点标记添加到已有的地图实例：
                map.add(marker);
                map.setFitView();

            }).catch(e => {
                console.log(e);
            })
        },
        SelectAddressCity(v) { //选择城市
            this.addressForm.citypath = v.join(',')
        },
        edit() {
            // 修改过地址时赋值
            if (this.dialogVisible) {
                if (this.$refs.cityArea) {
                    this.addressForm.citynames = this.$refs.cityArea.getCheckedNodes()[0].pathLabels.join(',')
                }
                this.form.address = JSON.parse(JSON.stringify(this.addressForm))
            }
            this.form.address.cityid = this.form.address.citypath.split(',')[3]
            // if(this.form.doortime){
            //     this.form.doortime = this.utils.curDateTime(this.form.doortime)
            // }
            this.$axios.post('/User/Order/edit', {
                id: this.id,
                doortime: this.form.doortime,
                address: this.form.address
            }).then((res) => {
                this.$message.success(res.msg);
                this.dialogVisible = false
            })
        },
        //合并单元格
        objectSpanMethod({ row, column, rowIndex, columnIndex }) {
            let mergeLength = 1;//需要进行横纵合并的列
            if (columnIndex < mergeLength) {
                let finArray = [1, 1];
                // 处理行数据
                console.log(Object.keys(row))
                let cgname = Object.keys(row)[7]//7是数字最后一项大类id
                if (rowIndex === 0 || row[cgname] !== this.retrievetableData[rowIndex - 1][cgname]) {
                    let rowspan = 1;
                    //计算需要进行合并操作的行
                    for (let i = 0; i < this.retrievetableData.length - 1; i++) {
                        // 只合并连续的
                        if (this.retrievetableData[i][cgname] === row[cgname] && this.retrievetableData[i + 1][cgname] === row[cgname]) {
                            rowspan++;
                        }
                    }
                    finArray[0] = rowspan;
                } else {
                    finArray[0] = 0;
                }
                return finArray
            }
        },
        getSummaries(param) {
            const { columns, data } = param;
            const sums = [];
            columns.forEach((column, index) => {
                if (index === 0) {
                    sums[index] = '合计';
                    return;
                }
                const values = data.map(item => Number(item[column.property]));
                if (!values.every(value => isNaN(value)) && index == 4) {
                    sums[index] = values.reduce((prev, curr) => {
                        const value = Number(curr);
                        if (!isNaN(value)) {
                            return prev + curr;
                        } else {
                            return prev;
                        }
                    }, 0);
                    // sums[index] += ' 元';
                } else {
                    sums[index] = '/';
                }
            });
            if(sums.length>0){
                sums[4] = (sums[4]).toFixed(2)
            }
            return sums;
        },
        getDetails(id) {
            this.retrievetableData = []
            this.$axios.get('/User/Order/Detail?id=' + id).then((res) => {
                this.form = res
                console.log(res.details)
                res.details.forEach((item, index) => {
                    // console.log(item,"==>item", index ,'===>index')
                    item.details.forEach((i, x) => {
                        let obj = {}
                        obj.amount = i.amount
                        obj.price = i.price
                        // obj.averageprice = i.averageprice
                        // obj.id = i.id
                        obj.typenames = i.productname
                        obj.typepath = i.typepath
                        obj.typeremarks = i.typeremarks
                        obj.weight = i.weight
                        obj.large = item.names
                        obj.bigid = item.id
                        obj.isweighing = i.isweighing
                        obj.typeremarks = i.typeremarks?i.typeremarks:'/'
                        this.retrievetableData.push(obj)
                        // console.log(i,"==>i", x ,'===>x')
                        // console.log(item,"==>item", index ,'===>index')
                    })
                })
            })
        },
        goLog() {
            this.$router.push({
                path: 'log'
            })
        },
        // 分派小哥
        distribution(row) {
            this.sendForm.citynames = row.citynames
            this.sendForm.citypath = row.citypath

            this.distributionShow = true
            this.distributionForm.orderId = row.id
            this.searchDistribution(row.id)
        },
        // 按条件搜索分配小哥
        searchDistribution(id) {
            this.$axios.post('/User/Order/GetCanAssignmentBrotherByOrder', {
                id: id,
                pageIndex: 1,
                pageSize: 999,
                key: this.sendForm.key,
                cityid: this.sendForm.cityid
            }).then((res) => {
                console.log(res)
                this.distributionList = res
            })
        },
        // 确定分派小哥
        assignment(brotherId) {
            this.distributionForm.brotherId = brotherId
            if (this.distributionForm.brotherId > 0) {
                this.$confirm('确定要分配该订单给小哥吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.loading = true
                    this.$axios.post('/User/Order/Assignment', {
                        orderId: this.distributionForm.orderId,
                        brotherId: this.distributionForm.brotherId
                    }).then((res) => {
                        this.$message.success(res.msg);
                        this.getDetails(this.id)
                        this.distributionShow = false
                        this.loading = false
                    }).catch(() => {
                        this.loading = false
                    })
                })
            } else {
                this.$message({
                    type: 'error',
                    message: '请选择小哥'
                });
            }
        },
        SelectCity(v) { //选择城市
            this.sendForm.cityid = v[v.length - 1];
        },
        loadCity(node, resolve) { //加载城市
            if (node.level == 0) {
                this.$axios.post('/city/List', {
                    pageIndex: 1,
                    pageSize: 9999,
                    pId: 0
                }).then((res) => {
                    node = res.rows.map(function (c) {
                        return {
                            id: c.id,
                            name: c.name
                        }
                    });
                    resolve(node);
                })
            } else {
                if (node.level < 4) {
                    this.$axios.post('/city/List', {
                        pageIndex: 1,
                        pageSize: 9999,
                        pId: node.value
                    }).then((res) => {
                        node = res.rows.map(function (c) {
                            return {
                                id: c.id,
                                name: c.name
                            }
                        });
                        resolve(node);
                    })
                } else {
                    resolve();
                }
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.img {
    border-radius: 5px;
    margin-right: 15px;
}

.ordercomments {
    .flex {
        display: inline-flex;
        padding-right: 30px;

        span {
            padding-right: 5px;
        }
    }
}
</style>
